<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item prop="type" label="新闻类型">
        <el-radio-group v-model="form.type" @change="selectType">
          <el-radio :label="2">外部链接</el-radio>
          <el-radio :label="1">本站公告</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row class="newsHeadlines_row">
        <el-form-item prop="title" label="新闻标题" class="newsHeadlines_item">
          <el-input v-model="form.title" placeholder="请输入新闻标题" class="newsHeadlines_input" ref="inputDom"></el-input>
          <el-popover placement="bottom" width="300" trigger="click" v-model="visible">
            <div class="popover_content">
              <el-card>
                <p slot="header" class="clearfix">
                  <span>颜色标签</span>
                  <el-button type="button" aria-label="Close" class="el-message-box__headerbtn"
                    @click="visible = false">
                    <i class="el-message-box__close el-icon-close"></i>
                  </el-button>
                </p>
                <el-row class="content_row">
                  <p class="circle">
                    <!-- <span v-for="(color, index) in colorGroup" :key="index" :class="color.bgColor"
                      @click="ChooseBgColor(color)"></span> -->
                    <span v-for="(color, index) in colorGroup" :key="index" :style="{backgroundColor:color.bgColor}"
                      @click="ChooseBgColor(color)"></span>
                    <i class="el-icon-delete deleteIcon" @click="delStyle"></i>
                  </p>
                </el-row>
              </el-card>
              <el-card>
                <p slot="header" class="clearfix">
                  <span>字体样式</span>
                </p>
                <el-row class="content_row">
                  <p class="fontStyle">
                    <span v-for="(font, k) in fontGroup" :key="k" :class="{'active': current == k}"
                      @click="addFontStyle(font)">{{font.text}}</span>
                  </p>
                </el-row>
              </el-card>
            </div>
            <img src="../../../assets/img/newsIcon.png" slot="reference" alt="" @click="openVisible">
          </el-popover>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span='8'>
          <el-form-item label="新闻排序" prop="orderNo">
            <!-- 输入1～300之间数字，1代表新闻排序在最前，不填写默认为150，排序相同则以新闻发布时间排序 -->
            <el-input v-model.number="form.orderNo" placeholder="请输入新闻排序"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span='8'>
          <el-form-item prop="menuId" label="所属栏目">
            <el-select v-model="form.menuId" placeholder="请选择所属栏目">
              <el-option v-for="(item,index) in menuIdList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label="新闻时间">
            <el-date-picker v-model="form.noticeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>

      </el-row>

      <!-- <el-row>
        <el-form-item prop="url" label="跳转链接" v-if="form.type === 2">
          <el-input v-model="form.url" placeholder="请输入公告链接"></el-input>
        </el-form-item>
      </el-row> -->

      <el-row>
        <el-form-item prop="content" label="新闻内容" v-if="form.type === 1">
          <div style="min-width:800px;margin-left:120px;">
            <!-- <div class="box">
              <el-upload style="display:none" class="upload-demo" name="file" accept="image/*"
                action="/zsrencai/api/sys/admin/file/image/upload" :show-file-list="false" :on-success="success"
                :before-upload="beforeAvatarUpload"></el-upload>
            </div> -->
            <!-- <quill-editor v-model="form.content" ref="myQuillEditor" class="ql-editor" :options="editorOption">
            </quill-editor> -->
            <div>
              <!-- <tinymce v-model="form.content" :height="300" /> -->
              <vue-ueditor-wrap v-model="form.content" :config="ueConfig"></vue-ueditor-wrap>
            </div>
          </div>
        </el-form-item>
      </el-row>
      <el-form-item label="上传文件" v-if="form.type === 1">
        <div class="boxs">
          <ul>
            <li v-for="(item,i) in form.newsFiles" :key="i">
              <span>附件{{i + 1}}:</span>
              <a target="_blank" :href="item.filePath">{{item.fileName}}</a>
              <span class="del" @click="delFile(i)">删除</span>
            </li>
          </ul>
          <el-upload class="upload-demo" name="file" action="/zsrencai/api/sys/admin/file/upload"
            :show-file-list="false" :on-success="Filesuccess" :before-upload="beforeEnclosureUpload">
            <el-button slot="trigger" size="small" type="primary">上传新文件</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item class="btn_box">
        <el-button class="finish_btn" type="primary" @click="onSubmit">确认提交</el-button>
        <el-button class="finish_btn" type="primary" @click="removeFun" v-if="form.id">重置</el-button>
        <el-button class="finish_btn" type="primary" @click="goback">取消返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { optioistnList, addNewsFun, initNews, editNewsFun } from '../../../api/content';
import VueUeditorWrap from 'vue-ueditor-wrap'
// 富文本编辑器 （新）直接引入组件 属性：：height="300"，v-model="获取富文本里面得数据"
import Tinymce from '../../common/Tinymce'
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['blockquote', 'code-block'], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ 'direction': 'rtl' }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ['clean'], // 清除文本格式-----['clean']
  ['image'] // 链接、图片、视频-----['link', 'image', 'video']
];
// 校验新闻排序
const checkOrderNo = (rule, value, callback) => {
  if (!Number.isInteger(value)) {
    callback(new Error('新闻排序输入有误，请输入数字类型'));
  } else {
    // 1～300
    if (value < 1 || value > 300) {
      callback(new Error('新闻排序必须是在1~300之间的数字'));
    } else {
      callback();
    }
  }
};
export default {
  components: {
    quillEditor,
    Tinymce,
    VueUeditorWrap
  },
  data () {
    return {
      editorOption: {
        placeholder: '请输入文本...',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            // handlers: {
            //   image: function (value) {
            //     if (value) {
            //       document.querySelector(".box input[name='file']").click();
            //     } else {
            //       this.quill.format('image', false);
            //     }
            //   }
            // }
          }
        }
      },
      visible: false, //控制el-popover的开关
      // 颜色组
      colorGroup: [
        // { val: 0, bgColor: 'blue' },
        // { val: 1, bgColor: 'fluorescentGreen' },
        // { val: 2, bgColor: 'wathet' },
        // { val: 3, bgColor: 'violet' },
        // { val: 4, bgColor: 'orange' },
        // { val: 5, bgColor: 'red' }
        { val: 0, bgColor: '#1793fc' },
        { val: 1, bgColor: '#76c941' },
        { val: 2, bgColor: '#2cbdb2' },
        { val: 3, bgColor: '#797fc9' },
        { val: 4, bgColor: '#ffb038' },
        { val: 5, bgColor: '#ff4f3e' }
      ],
      // 字体样式组
      fontGroup: [
        { val: 0, text: '粗体', style: 'fontWeight' },
        { val: 1, text: '斜体', style: 'italic' },
        { val: 2, text: '下划线', style: 'underline' }
      ],
      form: {
        type: 1,
        title: '',
        orderNo: '',  // 新闻排序
        noticeTime: '',
        menuId: '',
        id: '',
        content: '',
        newsFiles: [],
        url: '',
        titleColor: null, // 标题颜色
        titleFont: null, // 标题字体样式
      },
      current: -1,
      menuIdList: [],
      rules: {
        type: [{ required: true, message: '请选择新闻类型', trigger: 'change' }],
        menuId: [{ required: true, message: '请选择所属栏目', trigger: 'change' }],
        title: [
          { required: true, message: '请输入新闻标题', trigger: 'blur' },
          { max: 40, message: '新闻标题不能超过40个字' }
        ],
        orderNo: [{ pattern: /^[1-9]$|^[0-9]{2}$|^[1,2][0-9]{2}$|^[3][0][0]$/, trigger: 'blur', message: '新闻排序必须是在1~300之间的数字' }],
        url: [{ required: true, message: '请输入公告链接', trigger: 'blur' }],
        content: [{ required: true, message: '请输入新闻内容', trigger: 'blur' }]
      },
      ueConfig: {
        toolbars: [
          // [
          //   'undo', //撤销
          //   'bold', //加粗
          //   'indent', //首行缩进
          //   'italic', //斜体
          //   'underline', //下划线
          //   'strikethrough', //删除线
          //   'subscript', //下标
          //   'fontborder', //字符边框
          //   'superscript', //上标
          //   'formatmatch', //格式刷
          //   'fontfamily', //字体
          //   'fontsize', //字号
          //   'justifyleft', //居左对齐
          //   'justifycenter', //居中对齐
          //   'justifyright', //居右对齐
          //   'justifyjustify', //两端对齐
          //   'insertorderedlist', //有序列表
          //   'insertunorderedlist', //无序列表
          //   'lineheight',//行间距
          // ]
          [
            "source",
            "|",
            "undo",
            "redo",
            "|",
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "superscript",
            "subscript",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "|",
            "customstyle",
            "paragraph",
            "fontfamily",
            "fontsize",
            "|",
            "directionalityltr",
            "directionalityrtl",
            "indent",
            "|",
            "justifyleft",
            "justifycenter",
            "justifyright",
            "justifyjustify",
            "|",
            "touppercase",
            "tolowercase",
            "|",
            "link",
            "unlink",
            "anchor"
          ]

        ],
        'fontfamily': [
          { label: '', name: 'songti', val: '宋体,SimSun' },
          { label: '仿宋', name: 'fangsong', val: '仿宋,FangSong' },
          { label: '仿宋_GB2312', name: 'fangsong', val: '仿宋_GB2312,FangSong' },
          { label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai' },
          { label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei' },
          { label: '', name: 'heiti', val: '黑体, SimHei' },
          { label: '', name: 'lishu', val: '隶书, SimLi' },
          { label: '', name: 'andaleMono', val: 'andale mono' },
          { label: '', name: 'arial', val: 'arial, helvetica,sans-serif' },
          { label: '', name: 'arialBlack', val: 'arial black,avant garde' },
          { label: '', name: 'comicSansMs', val: 'comic sans ms' },
          { label: '', name: 'impact', val: 'impact,chicago' },
          { label: '', name: 'timesNewRoman', val: 'times new roman' }
        ],
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 上传文件接口
        enableAutoSave: false,
        elementPathEnable: false,
        wordCount: false,
        UEDITOR_HOME_URL: '/zsrc/UEditor/'
      },
    };
  },
  created () {
    this.getmenuIdList();
  },
  mounted () {
    this.form.id = this.$route.query.id;
    if (this.$route.query.id) {
      this.init();
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill;
    }
  },
  methods: {
    removeFun () {
      this.form = {
        type: '',
        title: '',
        noticeTime: '',
        menuId: '',
        content: '',
        newsFiles: [],
        url: '',
        id: this.$route.query.id
      }
    },
    beforeAvatarUpload () {
      if (this.form.newsFiles.length >= 10) {
        this.$message.error('最多上传文件10个');
        return false;
      }
    },
    // 限制附件上传
    beforeEnclosureUpload (file) {
      console.log(file, '上传附件')
      // 文件类型错误，支持的文件格式[jpg,png,bmp,pdf,doc,docx,ppt,pptx,xls,xlsx,zip,rar,7z]
      // 获取最后一个.定位置
      let index = file.name.lastIndexOf(".")
      // 获取后缀
      let ext = file.name.substr(index + 1);
      console.log(ext, '需要的文件后缀名', this.isAssetTypeFile(ext))
      // 判断是否包含后缀
      if (!this.isAssetTypeFile(ext)) {
        this.$message.error('文件类型错误，支持的文件格式[jpg,png,bmp,pdf,doc,docx,ppt,pptx,xls,xlsx,zip,rar,7z]');
        return false;
      }

      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('上传附件大小不能超过 10M!');
        return false;
      }
      if (this.form.newsFiles && this.form.newsFiles.length >= 10) {
        this.$message.warning(`抱歉，您最多可上传10个附件`)
        return false;
      }
    },
    delFile (i) {
      this.form.newsFiles.splice(i, 1);
      // this.$confirm('您要删除这条附件，删除后不可恢复，是否确定操作？', '信息提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning',
      //     callback: action => {
      //         if (action === 'confirm') {
      //            this.form.newsFiles.splice(i, 1);
      //         }
      //     }
      // });
    },
    Filesuccess (response, file, fileList) {
      const that = this;
      let temp = { filePath: response.data.fileUrl, fileName: file.name, fileSize: file.size };
      that.form.newsFiles.push(temp);

    },
    success (res, file, fileList) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      // if (res.code === '200' && res.info !== null) {
      // 获取光标所在位置
      let length = quill.getSelection().index;
      // 插入图片  res.info为服务器返回的图片地址
      quill.insertEmbed(length, 'image', res.data.fileUrl);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },
    goback () {
      window.history.back(-1);
    },
    init () {
      initNews(this.$route.query.id).then(data => {
        if (data.success) {
          // this.form = data.data;
          this.form = { ...this.form, ...data.data };
          this.form.content = decodeURI(this.form.content)
          // 循环字体颜色数组
          this.colorGroup.forEach((item, k) => {
            if (this.form.titleColor == item.val) {
              this.$refs.inputDom.$refs.input.style.color = item.bgColor;
            }
          });
          // 循环字体样式数组
          this.fontGroup.forEach(item => {
            if (this.form.titleFont == item.val) {
              this.$refs.inputDom.$refs.input.className = 'el-input__inner';
              this.$refs.inputDom.$refs.input.className = this.$refs.inputDom.$refs.input.className + ' ' + item.style;
            }
          })
        }
      });
    },
    onSubmit () {
      // 添加参数
      let query = {
        type: this.form.type,
        title: this.form.title,
        orderNo: this.form.orderNo,  // 新闻排序
        noticeTime: this.form.noticeTime,
        menuId: this.form.menuId,
        content: encodeURI(this.form.content),
        newsFiles: this.form.newsFiles,
        url: this.form.url,
        id: this.form.id,
        titleColor: this.form.titleColor, // 标题颜色
        titleFont: this.form.titleFont, // 标题字体样式
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          (this.form.id ? editNewsFun(query) : addNewsFun(query)).then(data => {
            if (data.success) {
              this.$message.success(this.form.id ? '修改成功' : '添加成功');
              window.history.back(-1);
            } else {
              this.$message.error(`${data.msg}`);
            }
          });
        }
      });
    },
    getmenuIdList () {
      optioistnList({}).then(data => {
        if (data.success) {
          this.menuIdList = data.data;
        }
      });
    },
    // 选择企业类型
    selectType (type) {
      this.form.type = type;
    },
    // 选择背景颜色
    ChooseBgColor (obj) {
      console.log(obj, '颜色')
      this.$refs.inputDom.$refs.input.style.color = obj.bgColor;
      // 获取标题颜色样式状态
      this.form.titleColor = obj.val;
    },
    // 点击字体样式
    addFontStyle (obj) {
      this.current = obj.val;
      this.$refs.inputDom.$refs.input.className = 'el-input__inner';
      this.$refs.inputDom.$refs.input.className = this.$refs.inputDom.$refs.input.className + ' ' + obj.style;
      // 获取标题字体样式撞他
      this.form.titleFont = obj.val;
    },
    // 点击删除标题样式
    delStyle () {
      // 删除样式，显示默认的
      this.$refs.inputDom.$refs.input.style.color = '';
      this.$refs.inputDom.$refs.input.className = 'el-input__inner';
      this.form.titleColor = null;
      this.form.titleFont = null;
      this.current = -1;
    },
    openVisible () {
      this.current = this.form.titleFont;
    },
    // 根据后缀名判断文件类型（格式）如果存在则为true 否则为false
    isAssetTypeFile (ext) {
      return ['jpg', 'png', 'bmp', 'pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'zip', 'rar', '7z'].indexOf(ext.toLowerCase()) !== -1;
    }
  }
};
</script>
<style>
ul,
li {
    list-style-type: none;
}
.boxs {
    position: relative;
    margin-left: 120px;
}
.boxs a {
    margin: 0 5px;
    color: #0000ff;
    cursor: pointer;
}
.boxs .del {
    color: #e1374c;
    cursor: pointer;
}
.editor {
    line-height: normal;
    height: 220px;
}
.ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
}
#disabledMsg.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
    color: #bfd9d8;
    background-color: #eef6f6;
    border-color: #d1e5e5;
}
.el-upload {
    width: 95px;
    height: 35px;
    border: 0;
}
</style>

<style scoped>
.container /deep/ .el-form-item__label {
    width: 120px;
}
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 120px;
}
.el-input {
    width: 180px;
    margin-right: 10px;
}
.el-textarea {
    /* width: 300px; */
}
.el-select {
    /* width: 300px; */
}
.btn_box {
    padding-left: 118px;
}
.btn_box .el-button {
    width: 100px;
    margin-right: 80px;
}
.upload /deep/ .el-upload {
    display: flex;
    align-items: center;
    width: 94px;
    height: 24px;
    line-height: 32px;
}
.upload /deep/ .upload-demo {
    display: inline-block;
    width: 94px;
    height: 24px;
    line-height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
}
.upload /deep/ .el-button {
    width: 94px;
    height: 24px;
    line-height: 0px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.upload ul {
    display: inline-block;
    list-style: none;
    width: 500px;
    overflow: hidden;
}
.upload ul li {
    float: left;
    width: 124px;
    height: 124px;
    margin-right: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    margin-bottom: 24px;
}
.upload ul li img {
    width: 100%;
    height: 100%;
}
.newsHeadlines_row .newsHeadlines_input {
    width: 554px;
}
.newsHeadlines_row .newsHeadlines_item {
    position: relative;
}
.newsHeadlines_row img {
    width: 20px;
    height: 20px;
    position: absolute;
    /* left: 32%; */
    /* left: 28%; */
    top: 23%;
    cursor: pointer;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
.el-card {
    border: 0px solid #ebeef5;
}
.el-message-box__headerbtn {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}
.el-message-box__headerbtn .el-message-box__close {
    color: #909399;
}
[class*=' el-icon-'],
[class^='el-icon-'] {
    font-family: element-icons !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.el-card /deep/.el-card__header {
    padding: 0 20px 0 5px;
    color: #303133;
    border-bottom: 0;
}
.el-card /deep/ .el-card__body {
    padding: 20px 5px;
}
.content_row {
    /* border: 1px solid green; */
}
.content_row p {
    height: 21px;
    line-height: 21px;
}
.content_row .circle span {
    display: inline-block;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    margin-left: 10px;
}
.content_row .circle .deleteIcon {
    font-size: 26px;
    line-height: 21px;
    margin-left: 20px;
    cursor: pointer;
}
.content_row .fontStyle span {
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    display: inline-block;
    margin-left: 20px;
    cursor: pointer;
    color: #606266;
}
.content_row .fontStyle span:first-child {
    margin-left: 0;
}
.content_row .blue {
    background-color: #1793fc;
}
.content_row .fluorescentGreen {
    background-color: #76c941;
}
.content_row .wathet {
    background-color: #2cbdb2;
}
.content_row .violet {
    background-color: #797fc9;
}
.content_row .orange {
    background-color: #ffb038;
}
.content_row .red {
    background-color: #ff4f3e;
}
.newsHeadlines_row /deep/ .fontWeight {
    font-weight: bolder;
}
.newsHeadlines_row /deep/ .italic {
    font-style: italic;
}
.newsHeadlines_row /deep/.underline {
    text-decoration: underline;
}
.content_row .fontStyle .active {
    color: #409eff;
}
</style>